<template>
  <div id="windowss_index">
    <div class="title">
      <span class="left">窗口管理</span>
      <el-button class="add" type="primary" size="small" icon="el-icon-plus" @click="goLink('/windowss/windowssadd')">
        添加
      </el-button>
    </div>
		<div style="background: #fff; padding: 32px;">
    <el-table
			class="e-table"
      type="index"
      :data="windowMessage.slice((currentPage-1)*pageSize,currentPage*pageSize)"
      @sort-change='getTimeChange'
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        prop="number"
        label="序号"
        align="center"
        width="100">
        <template slot-scope="scope" >
          <span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="windowName"
        width=""
        align="center"
        label="窗口名称"
      >
        <template slot-scope="scope">
          <span style="color: #328EF9;text-decoration:none;cursor: pointer">{{`${scope.row.windowName}`}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="businessName"
        width=""
        align="center"
        label="业务类型"
      >
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="创建时间"
        sortable
        align="center"
        width="240">
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <img @click="goLink({path:'/windowss/windowsssee',query:{id:scope.row.windowId}})" class="imgGroup" src="../assets/img/yewu_02.png">
          <img @click="goLink({path:'/windowss/windowssedit',query:{id:scope.row.windowId}})" class="imgGroup" src="../assets/img/yewu_01.png">
          <img @click="removeData(scope.$index, scope.row.windowId)" class="imgGroup" src="../assets/img/yewu_03.png">
        </template>
      </el-table-column>
    </el-table>
		</div>
    <div class="pagination">
      <el-pagination
        background
        :page-size="pageSize"
				@size-change="handleSizeChange" 
				@current-change="handleCurrentChange"
        layout="total,prev, pager, next"
        :total=windowMessage.length>
      </el-pagination>
    </div>
  </div>
</template>
<script>
  import { windowMessage,windowMessageDelete } from "../api/getData"
  export default {
    name: 'windowss_index',
    data: function () {
      return {
        centerDialogVisible: false,
        dataindex:0,
        windowMessage:[],
        itemId:'',
        pageSize:10,
        currentPage:1
      }
    },
    created: function () {}, // 创建时
    beforeMount: function () {}, // 挂载之前
    mounted: function () {
        windowMessage({"order":"true"}).then((data)=>{
          this.windowMessage = data.data.data
        })

    }, // 挂载之后
    beforeUpdate: function () {


    }, // 数据更新时调用,在渲染之前
    updated: function () {}, // 数据更新后,渲染后调用(禁止)
    beforeDestroy: function () {}, // 实例销毁前调用,解绑中间层的数据传输
    destroyed: function () {}, // 实例销毁后调用

    methods: {
      getTimeChange(column, prop, order) {
					if(column.order === 'descending'){
               windowMessage({"order":"true"}).then((data)=>{
                this.windowMessage = data.data.data
              })
					}else if(column.order === 'ascending'){
						 windowMessage({"order":"false"}).then((data)=>{
                this.windowMessage = data.data.data
              })
					}
			},

      goLink (url) {
        this.$router.push(url)
      },
      handleDelete (index, row) {
        this.dataindex = index
        this.centerDialogVisible = true
        console.log('--row--', row,index)
        this.itemId = row
      },
			handleSizeChange(val) {
				console.log(this.pageSize)
				this.pageSize = val;
			},
			handleCurrentChange(val) {
				this.currentPage = val;
      },
      // 删除窗口
		removeData(index,lacited){
      console.log(index,lacited,'lacited')
			this.$confirm('请再次确认是否删除?','提示',{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				// type: 'warning'
			}).then(()=>{
				windowMessageDelete({"id":lacited}).then((res) =>{
					if(res.data.code == 0){
            this.windowMessage.splice(index,1)
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}else{
            	this.$message({
                type: 'warning',
                message: res.data.msg
              });
          }
				}).catch((error) =>{
					console.log(error)
				})
			}).catch(()=>{
				this.$message({
					type: 'info',
					message: '已取消删除'
				});  
			})
		}
    } // 函数
  }
</script>
<style lang='scss'>
  #windowss_index {
    .title {
      width: 100%;
      height: 56px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #fff;
      margin-bottom: 24px;
      padding: 0 20px;
      .left {
        font-size: 16px;
        color: #333437;
        font-weight: bold;
      }
      .add {
        color: #fff;

      }
    }
    .el-table thead tr th {
      background-color: #fafafa;
			color: #333;
			font-weight: bold;
    }
    .el-table::before {
      height: 0;
    }
    .imgGroup {
      cursor: pointer;
      margin: 0 10px;
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 0;
      background-color: #fff;
      .el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
        background-color: #fff;
        border: 1px solid #ccc;
      }
      .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #409EFF;
      }
    }

  }
</style>
